function $(obj){
	return document.getElementById(obj);
}
//1.鼠标经过小盒子：显示遮罩和大图
//鼠标移入事件
$('smallbox').onmouseover=function(){
	$('mask').style.display='block';
	$('bigbox').style.display='block';
}
//2.鼠标离开小盒子：隐藏遮罩和大图
//鼠标移出事件：onmouseover
$('smallbox').onmouseleave=function(){
	$('mask').style.display='none';
	$('bigbox').style.display='none';
}
$('smallbox').onmousemove=function(){
	/*1.让遮罩跟着移动
	  获得鼠标位置坐标
	  计算遮罩位置坐标
	  设置遮罩显示位置
	  考虑遮罩可移动范围*/
    //获得鼠标位置坐标
    var pageX=event.pageX;
    var pageY=event.pageY;
    //计算遮罩位置坐标
    var maskX=pageX-$('mask').offsetWidth/2;
    var maskY=pageY-$('mask').offsetHeight/2;
     //考虑遮罩可移动范围
    if(maskX<0){
    	maskX=0;
    }if(maskY<0){
    	maskY=0;
    }
    if(maskX>$('box').offsetWidth-$('mask').offsetWidth){
    	maskX=$('box').offsetWidth-$('mask').offsetWidth;
    }
    if(maskY>$('box').offsetHeight-$('mask').offsetHeight){
    	maskY=$('box').offsetHeight-$('mask').offsetHeight;
    }
    //设置遮罩显示位置
    $('mask').style.left=maskX+'px';
    $('mask').style.top=maskY+'px';
    var bigImgToMove=$('bigImg').offsetWidth-$('bigbox').offsetWidth;
    var maskToMove=$('smallbox').offsetWidth-$('mask').offsetWidth;
    var rate=bigImgToMove/maskToMove;
    
    $('bigImg').style.left=-rate*maskX+'px';
    $('bigImg').style.top=-rate*maskY+'px';
}
